<template>
  <div class="box">
    <div class="top">
      <div class="jtleft">
        <p class="yp">有品收银台</p>
        <span class="iconfont icon-right-angle-copy" @click="fngo"></span>
      </div>
    </div>
    <div class="con">
      <div class="price">
        <p class="jg">￥<span>2099</span>.00</p>
        <div class="zhifu">
          <p class="sy">支付剩余时间:</p>
          <p>
            <van-count-down :time="time">
              <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
          </p>
        </div>
      </div>
      <!-- 支付栏 -->
      <div class="zhifubox">
        <div class="zhifulan">
          <div class="zhifubao">
            <div class="weixlogo">
              <span class="iconfont icon-weixin"></span>
            </div>
            <div class="jihe">
              <span class="weixwz">微信</span>
              <div class="tj">推荐</div>
            </div>
            <div class="manjian"><p>满199随机减，最高减10元</p></div>
            <div><input type="radio" /></div>
          </div>
          <div class="weibo">
            <div class="weibologo">
              <span class="iconfont icon-weibo"></span>
            </div>
            <div class="weibowz">微博支付</div>
            <div class="changdu"></div>
            <div><input type="radio" /></div>
          </div>
        </div>
      </div>
      <div class="zhezaoceng" v-show="erweima"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4162153741,1065560085&fm=11&gp=0.jpg" alt=""></div>
    </div>
    <div class="footer">
      <div class="footerPay" @click.stop='isShow'>确认支付￥<span>2099.00</span></div>
    </div>
  </div>
</template>

<script>
	export default {
		name:"Pay",
		data:function(){
			return{
				time:30 * 60 * 60 * 1000,
				isshow:true,
				erweima:false,
			}
		},
		components:{
			
		},
		methods:{
			fngo(){
				this.$router.go(-1)
			},
			isShow(){
				this.erweima = !this.erweima
			},
			
		}
	}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 头部 */
.box .top {
  width: 100%;
  height: 0.44rem;
  display: flex;
  align-items: center;
}
.top .jtleft {
  width: 100%;
  line-height: 0.44rem;
  text-align: center;
  position: relative;
}
.jtleft .icon-right-angle-copy {
  width: 12%;
  position: absolute;
  top: 0;
  left: 0;
  color: #848484;
}
/* 内容 */
.box .con {
  flex: 1;
  width: 100%;
  background-color: #f4f4f4;
  position: relative;
}
/* xianshi */
.con .zhezaoceng {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 1.225rem;
  top: 2.92rem;
  background-color: pink;
}
.con .zhezaoceng img{
  width: 100%;
  height: 100%;
}
.con .price {
  width: 100%;
  height: 0.8rem;
  text-align: center;
  margin-top: 0.1rem;
  color: #d71d1d;
}
.con .jg span {
  font-size: 0.3rem;
}
.con .zhifu {
  display: flex;
  justify-content: center;
  font-size: 0.12rem;
}
/* 支付栏 */
.zhifubox {
  width: 100%;
  height: 1.2rem;
  display: flex;
  justify-content: center;
}
.zhifulan {
  width: 93%;
  height: 100%;
  border-radius: 0.09rem;
}
.zhifubao {
  width: 100%;
  height: 0.6rem;
  border-radius: 0.08rem 8px 0 0;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.zhifubao .weixlogo,
.weibo .weibologo {
  width: 10%;
  text-align: center;
}
.zhifubao .weixlogo .icon-weixin {
  font-size: 0.3rem;
  color: #42b983;
}
.zhifubao .jihe {
  width: 25%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zhifubao .weixwz,
.weibo .weibowz {
  font-size: 0.14rem;
}
.zhifubao .tj {
  width: 0.4rem;
  line-height: 0.16rem;
  border-radius: 0.15rem;
  text-align: center;
  background-color: red;
  font-size: 0.12rem;
  opacity: 0.9;
  color: #fff;
}
.zhifubao .manjian {
  width: 53%;
  text-align: center;
  font-size: 0.1rem;
  color: #b4731f;
}
.zhifubao p {
  border: 0.01rem solid #b4731f;
  border-radius: 0.03rem;
  padding: 0 0.05rem;
}
.zhifulan .weibo {
  width: 100%;
  height: 0.6rem;
  border-radius: 0 0 0.08rem 8px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  box-sizing: border-box;
  border-top: 0.01rem solid #f5f5f5;
}
.weibo .weibologo {
  color: #e6162d;
}
.weibologo .icon-weibo {
  font-size: 0.3rem;
}
.weibo .weibowz {
  width: 25%;
  line-height: 0.6rem;
}
.weibo .changdu {
  width: 53%;
  line-height: 0.6rem;
}
/* 底部 */
.box .footer {
  background-color: #fff;
  width: 100%;
  height: 0.54rem;
  font-size: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.footer .footerPay {
  width: 92%;
  line-height: 0.38rem;
  border-radius: 0.2rem;
  background: linear-gradient(to left, #df1510, #f15338);
  color: #fff;
}
.footer .footerPay:active {
  background: #e73021;
}
</style>
